<template>
  <div class="user-detail">
    <h2>用户详情</h2>
    <div v-if="user">
      <p><strong>ID:</strong> {{ user.id }}</p>
      <p><strong>用户名:</strong> {{ user.username }}</p>
      <p><strong>邮箱:</strong> {{ user.email }}</p>
      <button @click="goBack">返回</button>
    </div>
    <p v-else>加载中...</p>
  </div>
</template>

<script>
export default {
  name: 'UserDetailPage',
  data() {
    return {
      user: null
    }
  },
  created() {
    this.fetchUserData()
  },
  methods: {
    async fetchUserData() {
      const userId = this.$route.params.userId
      try {
        const response = await this.$authApi.getUserInfo(userId)
        if (response.data.success) {
          this.user = response.data.data
        }
      } catch (error) {
        console.error('获取用户详情失败:', error)
      }
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.user-detail {
  padding: 20px;
}
</style>